<template>
  <div :class="[{msgwrap:flag},{active:flag1},{active2:flag2}]">
 
        <div v-if="flag">
      <slot name="success"></slot>
    </div>
    <div v-if="flag">
      <slot name="error"></slot>
    </div>

   
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true,
      flag1:false,
      flag2:false
    };

  },
  mounted() {
      setTimeout(()=>{ this.flag1 =true},500)
      setTimeout(()=>{this.flag2 = true},2500)
     
  }
};
</script>

<style >
.msgwrap {
  width: 100px;
  height: 60px;
  background: rgba(0, 0, 0, 0.5);
  left: 50%;
  margin-left: -50px;
  position: absolute;
  top: 0;
}
.active {
    transform: translateY(60px);
    transition: all 1s;
}
.active2 {
      transition: all 1s;
       transform: translateY(-100px);
}

</style>